<template>
  <div class="container">
    <div class="screen" ref="screen1">
      <div class="top">
        <Top></Top>
      </div>
      <div class="bottom">
        <div class="left">
          <Tourist class="tourist"></Tourist>
          <Sex class="sex"></Sex>
          <Age class="age"></Age>
        </div>
        <div class="center">
          <Map class="Map">地图</Map>
          <Line class="Line">线路</Line>
        </div>
        <div class="right">
          <Rank class="rank">排行</Rank>
          <Year class="year">年对比</Year>
          <Count class="count">统计</Count>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup name="screen">
import { onMounted, ref } from 'vue'
import Top from '@/views/screen/components/top/index.vue'
import Tourist from '@/views/screen/components/Tourist/index.vue'
import Sex from '@/views/screen/components/Sex/index.vue'
import Age from '@/views/screen/components/Age/index.vue'
import Rank from '@/views/screen/components/Rank/index.vue'
import Year from '@/views/screen/components/Year/index.vue'
import Count from '@/views/screen/components/Count/index.vue'
import Map from '@/views/screen/components/Map/index.vue'
import Line from '@/views/screen/components/Line/index.vue'
let screen1 = ref()
onMounted(() => {
  screen1.value.style.transform = `scale(${getScale()}) translate(-50%,-50%)`
})
//定义大屏缩放比例
/* 
    缩放比例计算 (getScale函数):
      输入参数：w（默认1920），h（默认1080），分别代表目标宽高（通常是设计稿的宽高）。
      计算逻辑：首先计算当前窗口宽度相对于目标宽度的比例ww，然后计算当前窗口高度相对于目标高度的比例wh。
      最后，取这两个比例中较小的一个作为最终的缩放比例。这是为了确保元素缩放后能够完全适应窗口，不会出现横向或纵向的滚动条。
      让其取最小的座位缩放比例，防止我们比例放大后，我们的页面不够我们的比例放大后的大小，大。而导致的内容溢出效果bug。
*/
function getScale(w = 1920, h = 1080) {
  const ww = window.innerWidth / w
  const wh = window.innerHeight / h
  return ww < wh ? ww : wh
}
//监听视口变化
window.onresize = () => {
  /* 通过函数算法获取设备高宽计算之后拿到的16:9比例计算大小进行缩放,然后再次重新对元素进行评议,将其元素永远保持在我们屏幕的中心点,而其中元素的排列,原点还是在左上角,这样子完成了不同比例设备的缩放问题
    其字体则是通过使用rem来适配大小
    scale(${getScale()})其作用是给几个值，在这中输入了一个数值，则是缩放元素
    translate(-50%,-50%)移动元素的位置，其元素默认在页面的最中间，通过两个-50%，让其-50%左位置，上-50%，定位到其整个页面的左上角
  */
  screen1.value.style.transform = `scale(${getScale()}) translate(-50%,-50%)`
}
</script>

<style scoped lang="scss">
* {
  margin: 0;
  padding: 0;
  color: white;
}
.container {
  width: 100vw;
  height: 100vh;
  background: url(./images/bg.png) no-repeat;
  background-size: cover;
  .screen {
    width: 1920px;
    height: 1080px;
    /* 绝对定位窗口 */
    /*
      使用这四个样式的好处在于它们能够创建一个固定且居中的元素，该元素不会随着页面的滚动而移动，也不会受到其他元素或父容器布局的影响。
      这对于创建模态窗口、通知框、固定导航栏等需要固定和居中显示的UI元素非常有用。这种方法是CSS中实现元素居中的一种非常流行和有效的方法。
      使用position:fixed;绝对定位窗口，我们需要对其元素进行摆放
    */
    position: fixed;
    left: 50%;
    top: 50%;
    transform-origin: left top;

    .bottom {
      display: flex;
      height: 1010px;
      .left {
        flex: 1;
        display: flex;
        flex-direction: column;

        .tourist {
          flex: 1.5;
        }
        .sex {
          flex: 1;
        }
        .age {
          flex: 1;
        }
      }
      .center {
        flex: 1.55;
        display: flex;
        flex-direction: column;
        .map {
          flex: 3.5;
        }
        .line {
          flex: 1;
        }
      }
      .right {
        flex: 1;
        display: flex;

        flex-direction: column;

        .rank {
          flex: 1.5;
        }
        .year {
          flex: 1;
        }
        .count {
          flex: 1;
        }
      }
    }
  }
}
</style>
